<template>
  <!-- 统计图表 -->
  <div ref="myChart" id="myChart"></div>

</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    datas: {
      type: Array,
      default: () => { }
    },
    obj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  computed: {},
  watch: {
    datas: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  mounted() {
    const that = this;
    that.init();
    window.onresize = () => {
      that.myChart.resize();
    }

  },
  methods: {
    init() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        // 调整内边距，让图表离左边有一定距离
        grid: {
          left: '15%',
          top: '0%',    // 减少顶部留白，设置为5%
          bottom: '5%', // 减少底部留白，设置为5%
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 30,
          top: 30,
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10,
          formatter(name, value) {
            // let info = $this.data.find((item) => item.name == name);
            return ` {name|${name}}  {value|${77788}}`;
          },
          textStyle: {
            width: 100,
            rich: {
              name: {
                color: "#fff",
              },
              value: {
                color: "yellow",
              },
            },
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'] ,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '完好' },
              { value: 735, name: '基本完好' },
              { value: 580, name: '破损' },
              { value: 484, name: '严重破损' },
              { value: 300, name: '报废' }
            ]
          }
        ]
      };
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart);
      }
      // 绘制图表
      this.myChart.setOption(option)
    }
  }
};
</script>
<style lang="sess" scoped>
</style>